header{
    padding:var(--padding-20);
}
header .logo{
    display:flex;
    justify-content:space-between;
}
header .logo .left{
    width:450px;
    height:120px;
    background:url(../images/logo.png) no-repeat;
    background-size:100%;
    background-position-y:center;
}
header .logo .right{
    position:relative;
    padding-top:12px;
    display:flex;
    flex-direction:column;
}
header .logo .right:after{
    position:absolute;
    top:50%;
    left:-80px;
    display:block;
    content:'';
    width:60px;
    height:60px;
    background:url(../images/tel.png);
    background-size:100%;
    transform:translateY(-50%);
}
header .logo .right p{
    color:var(--color-1);
    font-size:1.6em;
    font-weight:bold;
}
header .logo .right p span{
    padding:0 0 10px;
    color:#999;
    font-size:14px;
    font-weight:normal;
}
nav{
    background:var(--color-1);
}
nav > div{
    display:flex;
    justify-content:space-between;
}
nav a{
    padding:20px 40px;
    width:100px;
    color:#fff;
    text-align:center;
}
nav a.on,
nav a:hover{
    color:var(--color-1);
    background:#efefef;
}
.banner{
    position:relative;
}
.banner .img{
    top:0;
    position:absolute;
    opacity:0;
    transition:1s;
}
.banner .img:nth-child(1){
    position:relative;
}
.banner .img img{
    width:100%;
}
.banner .img.on{
    opacity:1;
}
footer{
    padding:30px 0;
    background:#333;
}
footer > div{
    display:flex;
    justify-content:space-between;
}
footer .item-1{
    position:relative;
    width:200px;
    height:200px;
}
footer .item-1:before,
footer .item-1:after{
    position:absolute;
    display:block;
    content:'';
}
footer .item-1:before{
    left:-20px;
    top:-70px;
    width:200px;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent #840404 transparent;
}
footer .item-1:after{
    top:-50px;
    width:200px;
    height:260px;
    background:var(--color-1);
    z-index:5;
}
footer .item-1 .item-wrap{
    position:relative;
    z-index:10;
}
footer .item-1 .img{
    margin:0 auto;
    width:160px;
}
footer .item-1 .img img{
    width:100%;
}
footer .item-1 p{
    padding-top:10px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
footer .item-2{
    padding-top:50px;
    width:290px;
}
footer .item-2:before{
    position:absolute;
    display:block;
    content:'';
    width:50px;
    height:50px;
    background:url(../images/tel.png);
    background-size:100%;
}
footer .item-2 p{
    color:#999;
    padding-left:60px;
}
footer .item-2 p:nth-child(2){
    color:var(--color-1);
    font-size:2em;
}
footer .item-3{
    padding-top:30px;
    color:#fff;
    width:300px;
    font-size:14px;
    line-height:200%;
}